<template>
  <div class="wapper">
    <div @click="show = true" class="value">
      <van-loading v-if="loading">加载中，请稍候...</van-loading>
      <template v-else>{{ text ? text : "请选择" }}</template>
    </div>

    <van-popup
      v-model="show"
      safe-area-inset-bottom
      close-on-popstate
      position="bottom"
      get-container="body"
      :style="{ height: '40%' }"
    >
      <van-empty
        v-if="!loading && columns.length < 1"
        :image="require('@/assets/empty.svg')"
        description="暂无数据"
      />

      <van-picker
        v-else
        class="picker-wapper"
        ref="picker"
        value-key="text"
        visible-item-count="3"
        show-toolbar
        :loading="loading"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { Picker, Popup, Loading, Empty } from "vant";

export default {
  name: "FixedSelect",
  components: {
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Loading.name]: Loading,
    [Empty.name]: Empty,
  },
  model: {
    event: "change",
  },
  props: {
    dataList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      columns: [],
      show: false,
      loading: false,
      text: "",
      token: "",
    };
  },
  computed: {
    valueMirror: {
      get: function () {
        return this.value;
      },
      set: function (val) {
        this.$emit("change", val);
      },
    },
  },
  methods: {
    onConfirm({ value, text }) {
      this.text = text;
      this.valueMirror = value;
      this.$nextTick(() => (this.show = false));
    },
    onCancel() {
      this.show = false;
    },
  },
  created() {
    if (this.dataList && this.dataList.length) {
      this.columns = this.dataList;
    }
  },
};
</script>

<style lang="less" scoped>
.wapper,
.value {
  width: 100%;
  height: 100%;
  text-align: center;
}
/deep/.van-popup {
  height: 50% !important;
}
</style>